<script setup>
import { ref, computed } from 'vue'
import { Head, Link, router } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
import { 
    EllipsisHorizontalIcon,
    MagnifyingGlassIcon,
    ChevronUpDownIcon,
    PencilSquareIcon,
    TrashIcon,
    EyeIcon,
    FunnelIcon,
    BarsArrowUpIcon,
    BarsArrowDownIcon,
    ChatBubbleLeftIcon,
    HeartIcon
} from '@heroicons/vue/20/solid'
import debounce from 'lodash/debounce'
import Pagination from '@/Components/UI/Pagination.vue'
import ConfirmDialog from '@/Components/UI/ConfirmDialog.vue'
import { useToast } from '@/Composables/useToast'
import Modal from '@/Components/UI/Modal.vue'
import SecondaryButton from '@/Components/Base/SecondaryButton.vue'

const props = defineProps({
    posts: {
        type: Object,
        required: true
    },
    stats: {
        type: Object,
        default: () => ({
            total: 0,
            published: 0,
            draft: 0,
            total_views: 0,
            total_comments: 0,
            total_likes: 0
        })
    },
    filters: {
        type: Object,
        default: () => ({})
    }
})

const toast = useToast()
const search = ref(props.filters.search || '')
const status = ref(props.filters.status || '')
const sort = ref(props.filters.sort || '')

// 删除相关的状态
const showDeleteModal = ref(false)
const isDeleting = ref(false)
const postToDelete = ref(null)

// 批量操作相关状态
const selectedPosts = ref([])
const isBatchProcessing = ref(false)

// 格式化日期
const formatDate = (dateString) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    })
}

// 处理搜索
const handleSearch = debounce(() => {
    router.get(route('author.posts.index'), {
        search: search.value,
        status: status.value,
        sort: sort.value
    }, {
        preserveState: true,
        preserveScroll: true
    })
}, 300)

// 处理状态筛选
const handleStatusFilter = (value) => {
    status.value = value
    handleSearch()
}

// 处理排序
const handleSort = (field) => {
    if (sort.value === `${field},asc`) {
        sort.value = `${field},desc`
    } else if (sort.value === `${field},desc`) {
        sort.value = ''
    } else {
        sort.value = `${field},asc`
    }
    handleSearch()
}

// 获取排序状态
const getSortDirection = (field) => {
    if (sort.value === `${field},asc`) return 'asc'
    if (sort.value === `${field},desc`) return 'desc'
    return null
}

// 打开删除确认弹窗
const openDeleteModal = (post) => {
    postToDelete.value = post
    showDeleteModal.value = true
}

// 删除文章
const deletePost = () => {
    if (!postToDelete.value) return
    
    isDeleting.value = true
    router.delete(route('author.posts.destroy', postToDelete.value.slug), {
        preserveScroll: true,
        onSuccess: () => {
            showDeleteModal.value = false
            postToDelete.value = null
            isDeleting.value = false
            toast.success('文章已删除')
            selectedPosts.value = []
        },
        onError: (error) => {
            isDeleting.value = false
            toast.error('删除失败，请重试')
            console.error('删除文章失败:', error)
        }
    })
}

// 批量操作相关函数
const toggleSelectPost = (postId) => {
    const index = selectedPosts.value.indexOf(postId)
    if (index > -1) {
        selectedPosts.value.splice(index, 1)
    } else {
        selectedPosts.value.push(postId)
    }
}

const handleBatchPublish = () => {
    if (selectedPosts.value.length === 0) return
    
    isBatchProcessing.value = true
    router.post(route('author.posts.batch-update-status'), {
        post_ids: selectedPosts.value,
        status: 'published'
    }, {
        preserveScroll: true,
        onSuccess: () => {
            selectedPosts.value = []
            isBatchProcessing.value = false
            toast.success('批量发布成功')
        },
        onError: () => {
            isBatchProcessing.value = false
            toast.error('批量发布失败，请重试')
        }
    })
}

const handleBatchDraft = () => {
    if (selectedPosts.value.length === 0) return
    
    isBatchProcessing.value = true
    router.post(route('author.posts.batch-update-status'), {
        post_ids: selectedPosts.value,
        status: 'draft'
    }, {
        preserveScroll: true,
        onSuccess: () => {
            selectedPosts.value = []
            isBatchProcessing.value = false
            toast.success('批量设为草稿成功')
        },
        onError: () => {
            isBatchProcessing.value = false
            toast.error('批量操作失败，请重试')
        }
    })
}

const handleBatchDelete = () => {
    if (selectedPosts.value.length === 0) return
    
    if (!confirm(`确定要删除选中的 ${selectedPosts.value.length} 篇文章吗？此操作无法撤销。`)) {
        return
    }
    
    isBatchProcessing.value = true
    router.post(route('author.posts.batch-delete'), {
        post_ids: selectedPosts.value
    }, {
        preserveScroll: true,
        onSuccess: () => {
            selectedPosts.value = []
            isBatchProcessing.value = false
            toast.success('批量删除成功')
        },
        onError: () => {
            isBatchProcessing.value = false
            toast.error('批量删除失败，请重试')
        }
    })
}
</script>

<template>
    <AppLayout>
        <Head title="我的文章" />

        <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                <!-- 页面标题和操作 -->
                <div class="mb-8">
                    <div class="sm:flex sm:items-center sm:justify-between">
                        <div class="mb-4 sm:mb-0">
                            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                                我的文章
                            </h1>
                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                                管理您创作的所有文章，包括已发布和草稿状态的文章
                            </p>
                        </div>
                        <div class="flex items-center gap-3">
                            <Link
                                :href="route('author.posts.create')"
                                class="inline-flex items-center px-4 py-2 rounded-lg bg-orange-600 text-sm font-medium text-white hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500"
                            >
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                </svg>
                                写文章
                            </Link>
                        </div>
                    </div>
                </div>

                <!-- 统计信息 -->
                <div class="mb-8 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
                    <!-- 总文章 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">总文章</div>
                        <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.total }}</div>
                    </div>

                    <!-- 已发布 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">已发布</div>
                        <div class="text-2xl font-bold text-green-600 dark:text-green-400">{{ stats.published }}</div>
                    </div>

                    <!-- 草稿 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">草稿</div>
                        <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{{ stats.draft }}</div>
                    </div>

                    <!-- 总浏览量 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">总浏览量</div>
                        <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ stats.total_views }}</div>
                    </div>

                    <!-- 总评论 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">总评论</div>
                        <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ stats.total_comments }}</div>
                    </div>

                    <!-- 总点赞 -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">总点赞</div>
                        <div class="text-2xl font-bold text-red-600 dark:text-red-400">{{ stats.total_likes }}</div>
                    </div>
                </div>

                <!-- 筛选栏 -->
                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-6">
                    <div class="flex flex-col lg:flex-row gap-3">
                        <!-- 搜索框 -->
                        <div class="relative flex-1">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                <MagnifyingGlassIcon class="h-5 w-5 text-gray-400" />
                            </div>
                            <input
                                v-model="search"
                                type="search"
                                placeholder="搜索文章标题..."
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 sm:text-sm"
                                @input="handleSearch"
                            >
                        </div>

                        <!-- 快速筛选按钮 -->
                        <div class="flex flex-wrap items-center gap-2">
                            <button
                                @click="handleStatusFilter('')"
                                :class="[
                                    'px-3 py-2 rounded-md text-sm font-medium',
                                    status === '' 
                                        ? 'bg-orange-600 text-white' 
                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                                ]"
                            >
                                全部
                            </button>
                            <button
                                @click="handleStatusFilter('published')"
                                :class="[
                                    'px-3 py-2 rounded-md text-sm font-medium',
                                    status === 'published' 
                                        ? 'bg-green-600 text-white' 
                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                                ]"
                            >
                                已发布
                            </button>
                            <button
                                @click="handleStatusFilter('draft')"
                                :class="[
                                    'px-3 py-2 rounded-md text-sm font-medium',
                                    status === 'draft' 
                                        ? 'bg-yellow-600 text-white' 
                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                                ]"
                            >
                                草稿
                            </button>
                        </div>

                        <!-- 排序 -->
                        <div class="flex items-center">
                            <button
                                @click="handleSort('created_at')"
                                class="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
                            >
                                <span>排序</span>
                                <BarsArrowDownIcon 
                                    v-if="getSortDirection('created_at') === 'asc'"
                                    class="h-4 w-4"
                                />
                                <BarsArrowUpIcon 
                                    v-else-if="getSortDirection('created_at') === 'desc'"
                                    class="h-4 w-4"
                                />
                                <ChevronUpDownIcon 
                                    v-else
                                    class="h-4 w-4"
                                />
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 批量操作栏 -->
                <div v-if="selectedPosts.length > 0" class="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4 mb-6">
                    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                        <div class="flex items-center gap-3 flex-wrap">
                            <div class="text-sm font-medium text-orange-900 dark:text-orange-100">
                                已选择 {{ selectedPosts.length }} 篇文章
                            </div>
                            <div class="flex gap-2">
                                <button
                                    @click="handleBatchPublish"
                                    :disabled="isBatchProcessing"
                                    class="px-3 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
                                >
                                    批量发布
                                </button>
                                <button
                                    @click="handleBatchDraft"
                                    :disabled="isBatchProcessing"
                                    class="px-3 py-2 text-sm font-medium text-white bg-yellow-600 hover:bg-yellow-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
                                >
                                    设为草稿
                                </button>
                                <button
                                    @click="handleBatchDelete"
                                    :disabled="isBatchProcessing"
                                    class="px-3 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
                                >
                                    批量删除
                                </button>
                            </div>
                        </div>
                        <button
                            @click="selectedPosts = []"
                            class="px-3 py-2 text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100"
                        >
                            取消选择
                        </button>
                    </div>
                </div>

                <!-- 文章卡片网格 -->
                <div v-if="posts.data && posts.data.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                    <div
                        v-for="post in posts.data"
                        :key="post.id"
                        class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
                    >
                        <!-- 卡片内容 -->
                        <div class="p-3">
                            <!-- 标题和操作 -->
                            <div class="flex items-start justify-between gap-2 mb-2">
                                <div class="flex items-start gap-2 flex-1 min-w-0">
                                    <input
                                        type="checkbox"
                                        :checked="selectedPosts.includes(post.id)"
                                        @change="toggleSelectPost(post.id)"
                                        class="mt-0.5 h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-2 focus:ring-orange-500 cursor-pointer shrink-0"
                                    />
                                    <Link
                                        :href="route('author.posts.edit', post.slug)"
                                        class="flex-1 min-w-0"
                                    >
                                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white hover:text-orange-600 dark:hover:text-orange-400 line-clamp-2 leading-snug">
                                            {{ post.title }}
                                        </h3>
                                    </Link>
                                </div>
                                <Menu as="div" class="relative shrink-0">
                                    <MenuButton class="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                        <EllipsisHorizontalIcon class="h-4 w-4" />
                                    </MenuButton>
                                    <MenuItems class="absolute right-0 z-20 mt-2 w-40 origin-top-right rounded-md bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                                        <MenuItem v-slot="{ active }">
                                            <Link
                                                :href="route('blog.posts.show', post.slug)"
                                                :class="[active ? 'bg-gray-50 dark:bg-gray-700' : '', 'flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-300']"
                                            >
                                                <EyeIcon class="h-4 w-4" />
                                                查看
                                            </Link>
                                        </MenuItem>
                                        <MenuItem v-slot="{ active }">
                                            <Link
                                                :href="route('author.posts.edit', post.slug)"
                                                :class="[active ? 'bg-gray-50 dark:bg-gray-700' : '', 'flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-300']"
                                            >
                                                <PencilSquareIcon class="h-4 w-4" />
                                                编辑
                                            </Link>
                                        </MenuItem>
                                        <div class="border-t border-gray-200 dark:border-gray-700"></div>
                                        <MenuItem v-slot="{ active }">
                                            <button
                                                @click="openDeleteModal(post)"
                                                :class="[active ? 'bg-red-50 dark:bg-red-900/20' : '', 'flex items-center gap-2 w-full text-left px-3 py-2 text-sm text-red-600 dark:text-red-400']"
                                            >
                                                <TrashIcon class="h-4 w-4" />
                                                删除
                                            </button>
                                        </MenuItem>
                                    </MenuItems>
                                </Menu>
                            </div>

                            <!-- 文章摘要 -->
                            <p v-if="post.excerpt" class="text-xs text-gray-600 dark:text-gray-400 mb-2 line-clamp-2 leading-relaxed">
                                {{ post.excerpt }}
                            </p>

                            <!-- 标签、状态、统计和时间 - 紧凑布局 -->
                            <div class="flex flex-wrap items-center gap-2 text-xs">
                                <!-- 分类和状态 -->
                                <span
                                    v-if="post.category"
                                    class="inline-flex items-center px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium"
                                >
                                    {{ post.category.name }}
                                </span>
                                <span
                                    :class="[
                                        'inline-flex items-center px-1.5 py-0.5 rounded font-medium',
                                        post.published_at 
                                            ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
                                            : 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400'
                                    ]"
                                >
                                    {{ post.published_at ? '已发布' : '草稿' }}
                                </span>

                                <!-- 分隔符 -->
                                <span class="text-gray-300 dark:text-gray-600">•</span>

                                <!-- 统计数据 -->
                                <div class="flex items-center gap-3 text-gray-500 dark:text-gray-400">
                                    <div class="flex items-center gap-1">
                                        <EyeIcon class="w-3 h-3" />
                                        <span class="font-medium text-gray-700 dark:text-gray-300">{{ post.views || 0 }}</span>
                                    </div>
                                    <div class="flex items-center gap-1">
                                        <ChatBubbleLeftIcon class="w-3 h-3" />
                                        <span class="font-medium text-gray-700 dark:text-gray-300">{{ post.comments_count || 0 }}</span>
                                    </div>
                                    <div class="flex items-center gap-1">
                                        <HeartIcon class="w-3 h-3" />
                                        <span class="font-medium text-gray-700 dark:text-gray-300">{{ post.likes_count || 0 }}</span>
                                    </div>
                                </div>

                                <!-- 分隔符 -->
                                <span class="text-gray-300 dark:text-gray-600">•</span>

                                <!-- 时间 -->
                                <span class="text-gray-500 dark:text-gray-400">
                                    {{ formatDate(post.created_at) }}
                                </span>
                            </div>
                        </div>

                        <!-- 卡片底部操作 -->
                        <div class="px-3 py-2 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between bg-gray-50 dark:bg-gray-800/50">
                            <div class="flex items-center gap-3">
                                <Link
                                    :href="route('blog.posts.show', post.slug)"
                                    class="text-xs text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                                >
                                    查看
                                </Link>
                                <Link
                                    :href="route('author.posts.edit', post.slug)"
                                    class="text-xs text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400"
                                >
                                    编辑
                                </Link>
                            </div>
                            <button
                                @click="openDeleteModal(post)"
                                class="text-xs text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300"
                            >
                                删除
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 空状态 -->
                <div v-else class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-12 text-center">
                    <div class="mx-auto w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mb-4">
                        <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">暂无文章</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
                        开始创作您的第一篇文章，分享您的想法和知识
                    </p>
                    <Link
                        :href="route('author.posts.create')"
                        class="inline-flex items-center px-4 py-2 rounded-md bg-orange-600 text-sm font-medium text-white hover:bg-orange-700"
                    >
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        写文章
                    </Link>
                </div>

                <!-- 分页 -->
                <div v-if="posts.data && posts.data.length > 0" class="mt-8">
                    <Pagination :links="posts.links" />
                </div>

                <!-- 删除确认对话框 -->
                <Modal :show="showDeleteModal" @close="showDeleteModal = false">
                    <div class="p-6">
                        <div class="text-center mb-6">
                            <div class="mx-auto w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-4">
                                <svg class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                </svg>
                            </div>
                            
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                                确认删除文章
                            </h3>
                            
                            <div class="mt-2">
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    您确定要删除 <span class="font-semibold text-gray-900 dark:text-white">《{{ postToDelete?.title }}》</span> 吗？
                                </p>
                                <p class="text-xs text-red-600 dark:text-red-400 mt-2">
                                    此操作无法撤消，文章的所有内容和历史版本都将被永久删除。
                                </p>
                            </div>
                        </div>

                        <div class="flex justify-end gap-3">
                            <SecondaryButton 
                                @click="showDeleteModal = false" 
                                :disabled="isDeleting"
                            >
                                取消
                            </SecondaryButton>
                            
                            <button
                                type="button"
                                @click="deletePost"
                                :disabled="isDeleting"
                                class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                <svg v-if="isDeleting" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                                </svg>
                                {{ isDeleting ? '正在删除...' : '确认删除' }}
                            </button>
                        </div>
                    </div>
                </Modal>
            </div>
        </div>
    </AppLayout>
</template>
